import React, {useEffect} from 'react';
import {Grid, Typography} from "@material-ui/core";
import {makeStyles} from "@material-ui/styles";
import ApplicationSettings from "./Cards/ApplicationSettings/ApplicationSettings";
import UserDetails from "./Cards/UserDetails/UserDetails";
import {scrollToTop} from "../../../../assets/functions/functions";
import Box from "@material-ui/core/Box";
import ScrollToTop from "../Common/ScrollTopWrapper/ScrollTopWrapper";


const useStyles = makeStyles(theme => ({
  gutter: {
    margin: theme.spacing(0, 0, 2, 0)
  },
}))

export default function Settings() {
  const styles = useStyles();

  useEffect(() => {
    scrollToTop();
  }, [])


  // TODO: Connect to the backend to save/change user data
  return (
    <>
      <Grid container direction="column">

        <Grid item>
          <Typography variant="h3">
            Settings
          </Typography>
        </Grid>

        <Box className={styles.gutter}/>

        <Grid container spacing={3} justify="center">

          <Grid item xs={12} md={6}>

            <Typography gutterBottom variant='h6'>
              My personal settings
            </Typography>

            <UserDetails/>

          </Grid>

          <Grid item xs={12} md={6}>

            <Typography gutterBottom variant='h6'>
              Application settings
            </Typography>

            <ApplicationSettings/>

          </Grid>

        </Grid>

        <ScrollToTop />

      </Grid>
    </>
  )
}
